import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { LazyMotion } from "framer-motion";

import Home from "./Home";
import Header from "./components/Header";
import FixedButtons from "./components/FixedButtons";
import RandomBackground from "./components/RandomBackground";
import Footer from "./components/Footer";
import SwitchPersonModal from "./components/SwitchPersonModal";

const features = () =>
  import("@/lib/motionFeatures").then((res) => res.default);
const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <LazyMotion features={features}>
        <Header />
        <main className="min-h-[calc(100dvh_-_60px)]">
          <Home />
        </main>
        <Footer />
        <FixedButtons />
        <RandomBackground />
        <SwitchPersonModal />
      </LazyMotion>
    </QueryClientProvider>
  );
}
